<template>
  <div class="main">
    <div class="sidebar">
      <el-menu
        default-active="1-4-1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-s-home"></i>
            <span slot="title">核心</span>
          </template>
          <router-link to="/management">首页 </router-link>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">核心</span>
          </template>
          <el-menu-item-group>
            <span slot="title">题目编辑</span>
            <el-menu-item index="1-1"
              ><router-link to="/management/editorCodeProblem">
                编程题编辑
              </router-link></el-menu-item
            >
            <el-menu-item index="1-2"
              ><router-link to="/management/editorChoiceProblem">
                选择题编辑
              </router-link></el-menu-item
            >
            <el-menu-item index="1-3"
              ><router-link to="/management/editorFillProblem">
                填空题编辑
              </router-link></el-menu-item
            >
          </el-menu-item-group>
          <el-menu-item-group title="小组信息">
            <el-menu-item index="1-3"
              ><router-link to="/group">
                小组信息配置
              </router-link></el-menu-item
            >
            <el-menu-item index="1-4"
            ><router-link to="/management/sendTask">
              发送小组通知任务
            </router-link></el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="3">
          <i class="el-icon-s-data"></i>
          <span slot="title">统计信息</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-document"></i>
          <span slot="title">试卷信息</span>
        </el-menu-item>
        <el-menu-item index="5">
          <i class="el-icon-s-check"></i>
          <span slot="title">审批信息</span>
        </el-menu-item>
        <el-menu-item index="6">
          <i class="el-icon-setting"></i>
          <span slot="title">设置</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="info_content">
      <div class="notice_group_info">
        <div class="group_info">
          <group />
        </div>
        <div class="notice_info">
          <notice />
        </div>
      </div>

      <div class="calendar_info">
        <calendar />
      </div>
    </div>
  </div>
</template>

<script>
import notice from "@/components/notice.vue";
import group from "@/components/group.vue";
import calendar from "@/components/calendar.vue";

export default {
  data() {
    return {
      isCollapse: true,
    };
  },
  components: {
    notice,
    group,
    calendar,
  },
  mounted() {

  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped>
.main {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
}
.sidebar {
  height: 100vh;
  width: 6vw;
}
.info_content {
  height: 100vh;
  width: 90vw;
  margin-left: 2vw;
  margin-top: 2vh;
  display: flex;
  flex-wrap: wrap;
}
.notice_group_info {
  height: 100vh;
  width: 34vw;
  display: flex;
  flex-wrap: wrap;
}
.group_info {
  height: 47vh;
  width: 34vw;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.notice_info {
  height: 40vh;
  width: 34vw;
  margin-top: 2vh;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.calendar_info {
  height: 96vh;
  width: 50vw;
  margin-left: 2vw;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100vh;
  min-height: 100vh;
}
.el-menu--collapse {
  height: 100vh;
}
</style>